<template>
  <div class="newflowtree">
    <!-- 主流程 -->
    <!-- 开始节点 -->
    <div v-show="tree.stepType == 4 || tree.stepType == 1 || tree.stepType == 3 || tree.stepType == 6" class="start-node-bg">
      <div class="start-node" @click="handleEdit(tree)">
        <div>{{ tree.stepType === 3 ? tree.data.form.approvalName : tree.title }}</div>
        <section v-if="tree.stepType!==1&&tree.stepType!==2" @click.stop="Delete(tree)">
          <i class="el-icon-error"></i>
        </section>
      </div>
      <div class="add-node">
        <div class="top"></div>
      </div>
      <div class="add-node">
        <el-popover placement="right" width="135" trigger="click">
          <div class="link-node" @click="addNode(3,index ,tree,1)">审批节点</div>
          <div class="link-node" @click="addNode(4,index , tree,1)">抄送节点</div>
          <div class="link-node" @click="addNode(5, index ,tree,1)">条件分支</div>
          <div class="link-node" @click="addNode(6,index , tree,1)">子流程</div>
          <el-button slot="reference" size="mini" icon="el-icon-circle-plus" style="font-size: 24px;" circle></el-button>
        </el-popover>
      </div>
      <div class="add-node">
        <div class="bottom"></div>
      </div>
    </div>
    <div v-show="tree.stepType == 5" class="con-node-bg">
      <div class="bottom_all-bg">
        <div class="bottom_all-delete">
          <el-button round class="bottom_all" style="margin: 0;position:relative;z-index:2;" @click="addConditions(tree)">添加条件</el-button>
        </div>
      </div>
      <div class="con-node-hr">
        <div class="item">
          <div v-for="(item, index2) in tree.childNode" :key="index2" class="box">
            <div class="lin-top" :style="index2 == 0 ? topLeft : ''"></div>
            <div class="lin-bottom" :style="index2 == 0 ? bottomLeft : ''"></div>
            <div class="lin-top" :style="index2 + 1 == tree.childNode.length ? topRight : ''"></div>
            <div class="lin-bottom" :style="index2 + 1 == tree.childNode.length ? bottomRight : ''"></div>
            <div class="add-node">
              <div class="bottom" style="height: 40px;"></div>
            </div>
            <div class="add-node">
              <div class="triangle">
                <div class="the-triangle"></div>
              </div>
            </div>
            <!-- 树节点配置 -->
            <div class="box-info" @click="setConditions(item, tree.childNode, index2)">
              <div class="priority-container">{{ `优先级${item.priorityNo}` }}</div>
              <div class="conditions-container">{{ item.title }}</div>
              <section @click.stop="Delete(item)">
                <i class="el-icon-error"></i>
              </section>
            </div>
            <div class="add-node">
              <div class="top" style="height: 20px;"></div>
            </div>
            <div class="add-node">
              <el-popover placement="right" width="135" trigger="click">
                <div class="link-node" @click="addNode(3, index2,item,1)">审批节点</div>
                <div class="link-node" @click="addNode(4,  index2,item,1)">抄送节点</div>
                <div class="link-node" @click="addNode(5, index2,item,1)">条件分支</div>
                <div class="link-node" @click="addNode(6, index2, item,1)">子流程</div>
                <el-button slot="reference" size="mini" icon="el-icon-circle-plus" style="font-size: 24px;" circle></el-button>
              </el-popover>
            </div>
            <div class="add-node">
              <div class="bottom" style="height: 20px;"></div>
            </div>
            <!-- 递归加载 -->
            <template v-for="(list2, index3) in item.childNode">
              <Tree :key="index3" :tree="list2" :index="index3" />
            </template>
          </div>
        </div>
      </div>
      <div class="add-node">
        <div class="top"></div>
      </div>
      <div class="add-node">
        <el-popover placement="right" width="135" trigger="click">
          <div class="link-node" @click="addNode(3,index, tree,0)">审批节点</div>
          <div class="link-node" @click="addNode(4,index, tree,0)">抄送节点</div>
          <div class="link-node" @click="addNode(5,index, tree,0)">条件分支</div>
          <div class="link-node" @click="addNode(6,index, tree,0)">子流程</div>
          <el-button slot="reference" size="mini" icon="el-icon-circle-plus" style="font-size: 24px;" circle></el-button>
        </el-popover>
      </div>
      <div class="add-node">
        <div class="bottom"></div>
      </div>
      <div class="add-node">
        <div class="triangle">
          <div class="the-triangle"></div>
        </div>
      </div>
    </div>
    <div v-show="tree.stepType == 2" class="circle-bg">
      <div class="circle-bot">
        <div class="circle">
          <div>
            流程
            <br />结束
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNodeId } from '@/utils/utils';
import bus from './bus';
export default {
  name: "Tree",
  data() {
    return {};
  },
  props: ["tree", "index"],
  computed: {
    style() {
      return `width:300px`;
    },
    topLeft() {
      return `position: absolute;left: 0;top:-2px;height: 2px;width:calc( 100% / 2 - 1px);background: #fafcff;`;
    },
    bottomLeft() {
      return `position: absolute;left: 0;bottom:-2px;height: 2px;width:calc( 100% / 2 - 1px);background: #fafcff;`;
    },
    topRight() {
      return `position: absolute;right: 0;top:-2px;height: 2px;width:calc( 100% / 2 - 1px);background: #fafcff;`;
    },
    bottomRight() {
      return `position: absolute;right: 0;bottom:-2px;height: 2px;width:calc( 100% / 2 - 1px);background: #fafcff;`;
    },
  },
  methods: {
    /*删除条件*/
    Delete(data) {
      bus.$emit("deleteNode", data);
    },
    /*添加条件*/
    addConditions(data) {
      let params = {
        nodeId: getNodeId(),
        stepType: 5,
        title: "请设置条件",
        childNode: [],
        priorityNo: data.childNode.length + 1,
      };
      data.childNode.push(params);
    },
    /*state状态
     *key表示添加的类型，1:开始节点； 2: 结束节点；3：审批节点；4：抄送节点；5：条件分支；6：子流程
     *data表示类型的数据集合
     * index表示数据在当前数组的索引
     */
    addNode(key, index, data, status) {
      bus.$emit("addNode", key, index, data, status);
    },
    /**
     * @Description: 配置条件分支
     * @Param: 
     * @Author: wangwangwang
     */
    setConditions(data, parentData) {
      bus.$emit("setConditionEvent", data, parentData);
    },
    /**
     * @Description: 节点编辑
     * @Param: 
     * @Author: wangwangwang
     */
    handleEdit(data) {
      bus.$emit("editNode", data);
    },
  }
};
</script>
<style lang="scss" src="./newflows.scss" scoped></style>
<style lang="scss">
.newflows {
  .el-dialog {
    margin-top: 65px !important;
  }
}
</style>
